// 1.获取元素
let username = document.querySelector("#username");
// 2.注册事件 获得焦点事件 onfocus
username.onfocus = function () {
    // console.log('得到了焦点');
    if (this.value === "手机号" || this.value === "手机号") {
        this.value = "";
    }
    // 获得焦点需要把文本框里面的文字颜色变黑
    this.style.color = "black";
}
// 3. 注册事件 失去焦点事件 onblur
username.onblur = function () {
    // console.log('失去了焦点');
    if (this.value === '') {
        this.value = '手机号';
    }
    // 失去焦点需要把文本框里面的文字颜色变浅色
    this.style.color = "#999";
}

// 首先判断的事件是表单失去焦点 onblur
// 如果输入正确则提示正确的信息颜色为绿色小图标变化
// 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
// 因为里面变化样式较多，我们采取className修改样式
// 1.获取元素
let ipt1 = document.querySelector('.ipt1');
let message = document.querySelector('.message');
//2. 注册事件 失去焦点
ipt1.onblur = function () {
    // 根据表单里面值的长度 ipt.value.length
    if (this.value.length < 8 || this.value.length > 20) {
        // console.log('错误');
        message.className = 'message wrong';
        message.innerHTML = '您输入的位数不对要求6~16位';
    } else {
        message.className = 'message right';
        message.innerHTML = '您输入格式的正确';
    }
}